<template>
	<view>
		<view style="background-color: #d0b192;border-radius: 1.5em;">
			<view :style="{height: statusBarHeight+'px'}"></view>
			<view style="color: #f6f6f6;padding: 40rpx;">
				<view style="padding: 40rpx 0;"@click="topleftClick">
					<u-icon name="arrow-left"size="50"color="#ffffff"></u-icon>
				</view>
				<view>
					<view class="u-flex" style="justify-content: space-between;">
						<u-avatar size="150" :src="$url+author.avatar"></u-avatar>
						<view>
							<view style="background-color: #f7f7f7; padding: 20rpx 40rpx;border-radius: 2em;
							color: #f06d2d; font-weight: bold;" @click.stop="gGuanz" v-if="indexs == 0">
								+&nbsp;关注
							</view>
							<view style="background-color: #f7f7f7; padding: 20rpx 40rpx;border-radius: 2em;
							color: #808080; font-weight: bold;" @click.stop="yGuanz" v-else>
								已关注
							</view>
						</view>
					</view>
					<view class="u-flex" style="margin-top: 30rpx;">
						<view style="color: #F3F4F6; font-size: 40rpx;">{{author.authorName}}</view>
						<text style="margin: 0 20rpx; background-color: #bc9171;color: #fdfbea; border-radius: 0.3em;padding: 5rpx 15rpx;">作者</text>
						<u-icon :name="sexName" :color="'#'+sexColor"></u-icon>
					</view>
					<view style="color: #DCE1EC;margin-bottom: 30rpx;">
						<text>{{author.signature}}</text>
						
					</view>
					<view style="color: #DCE1EC;">
						<text>写过{{authors.length}}本书</text>
					</view>
					<view style="justify-content: space-around;text-align: center;color: #F3F4F6;
					margin: 50rpx 0;" class="u-flex">
						<view>
							<view>1</view>
							<view>关注</view>
						</view>
						<view>
							<view>{{author.pour}}</view>
							<view>粉丝</view>
						</view>
						<view>
							<view>0</view>
							<view>获赞</view>
						</view>
					</view>
				</view>
			</view>
			<view style="background-color: #FFFFFF;border-radius: 1.5em;
			padding: 40rpx;">
				<u-tabs :list="list" :current="current" inactive-color="#9c9c9c" active-color="#000"
				@change="change"></u-tabs>
				<view class="u-flex" v-if="current == 0">
					<scroll-view scroll-x>
						<view class="u-flex">
							<view v-for="(item,index) in authors":key='index' style="margin: 20rpx 15rpx;">
								<bookshelf-item :item="item" @itemClick="itemClick"></bookshelf-item>
							</view>
						</view>

					</scroll-view>
				</view>
				<view v-else style="height: 100rpx;line-height: 100rpx;text-align: center;">
					<view style="margin: 20rpx 15rpx;color: #82848A;">暂无添加</view>
				</view>
				<view>
					<h3 style="margin: 20rpx 0;">作者说</h3>
					<view v-for="(item,index) in chapters" :key="index">
						<authorComment :item="item" :author="author" @itemClick="itemClick"></authorComment>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				authorId:0,
				indexs:0,
				list:[
					{
						name:"作品",
						id:1
					},
					{
						name:"书架",
						id:2
					}
				],
				sexName:"",
				sexColor:"",
				authors:[],
				author:{},
				chapters:[],
				followAuthor:{},
				statusBarHeight:0
			}
		},
		mounted() {
			let that = this
			//获取手机系统信息
			const info = uni.getSystemInfoSync()
			//设置状态栏高度
			that.statusBarHeight = info.statusBarHeight
			
		},
		methods: {
			async getAuthorItem(id){
				const res=await this.$myRequst({
					url:"/author/get/"+id
				})
				this.author = res.data.data
				if(this.author.sex){
					console.log("555")
					this.sexName="man"
					this.sexColor="007AFF"
				}else{
					
					this.sexName="woman"
					this.sexColor="ff0000"
					console.log(this.sexColor,this.sexName)
				}
				console.log(this.author)
			},
			async getChapters(id){//书id
				const res =await this.$myRequst({
					url:"/chapter/gets/"+id
				})
				this.chapters = this.chapters.concat(res.data.data)
				console.log(this.chapters)
			},
			async getAuthors(id){
				const res=await this.$myRequst({
					url:"/author/gets/"+id
				})
				this.authors = res.data.data
				console.log(this.authors)
				
			},
			topleftClick(){
				uni.navigateBack({
					
				})
			},
			change(e){
				this.current = e
			},
			itemClick(e){
				console.log(e)
				uni.navigateTo({
					url:"../bookItem/bookItem?id="+e
				})
			},
			yGuanz(){
				uni.showModal({
					title:"确定不再关注此账号？",
					confirmColor:"#f06d2d",
					confirmText:"不再关注",
					success: (res) => {
						if(res.confirm){
							this.getFollowAuthor().then((res)=>{
								this.getFollowDelete().then((res)=>{
									this.getAuthorPut().then((res)=>{
										this.indexs = 0
									})
								})
							})
							
						}
						
					}
				})
			},
			async getFollowDelete(){
				let id = this.followAuthor.id
				const res=await this.$myRequst({
					url:"/follow/delete/"+id,
					method:"DELETE"
				})
				console.log(res)
				
				
			},
			async getFollowPost(){
				console.log(this.author.id,uni.getStorageSync("userId"))
				const res=await this.$myRequst({
					url:"/follow/post",
					method:"POST",
					data:{
						authorIds:this.author.id,
						userId:uni.getStorageSync("userId")
					}
				})
				
				console.log(res)
			},
			async getAuthorPut(){
				let i = 0
				if(this.indexs == 0){
					i = ++this.author.pour
					console.log("111")
				}else{
					i = --this.author.pour
					console.log("2222")
				}
				const res=await this.$myRequst({
					url:"/author/put",
					method:"PUT",
					data:{
						id:this.author.id,
						pour:i
					}
				})
			},
			gGuanz(){
				this.getFollowPost().then((res)=>{
					this.getAuthorPut().then((res)=>{
						this.indexs = 1
					})
					
				})
			},
			async getFollowAuthor(){
				const res=await this.$myRequst({
					url:"/follow/gets/author/"+uni.getStorageSync("userId")
				})
				console.log(res.data.data)
				this.followAuthor = res.data.data.find(item => this.author.id == item.authorIds)
				console.log(this.followAuthor)
				if(this.followAuthor != undefined){
					this.indexs = 1
				}else{
					this.indexs = 0
				}
			}
		},
		onLoad(opstion) {
			this.authorId = opstion.id
			console.log(this.authorId)
			this.getAuthors(this.authorId).then((res)=>{
				this.authors.forEach(item=>{
					this.getChapters(item.id)
					this.getFollowAuthor()
				})
				
			})
			this.getAuthorItem(this.authorId)
		}
	}
</script>

<style>

</style>
